
<div>
	<ul>
		<li>
			<h2>Differs from gwt.xml UIBinder</h2>
			<p>For the html UI binder, it just requires pure html template.
				That means you don't need to force your UI design team to learn the
				GWT styled UI designer. And you can build your project with exsiting
				html templates like bootstrap's. There are too many resources in the
				web!</p>
		</li>
		<li>
			<h2>Multi Feature Integrared</h2>
			<p>The Template Binding, Event Handler Binding and Form Data
				Binding. It can be bound together WITHOUT stub interface.</p>
		</li>
		<li>
			<h2>The Template Binding</h2>
			<p>Let's take a look at the example below. And given a html
				template <code>TheTemplate.html</code>,</p> 
<pre>
&lt;div&gt;
	&lt;button id="button" &gt;The Button&lt;/button&gt;
	&lt;input id="input1" /&gt;
	&lt;input id="input2" /&gt;
&lt;/div&gt;
</pre> 
<pre>
@UiTemplate("TheTemplate.html")
public abstract class TheTemplate extends AbstractPage implements RequiresTemplate{
	public TheTemplate(){
		initWidget(createTemplate());
	}
}
</pre>
			<p>
				This example shows the most simple usage. You can also use
				<code>RequiresWebTempalte</code>
				and
				<code>@UiWebTemplate("TheTemplate.jsp")</code>
				to bind jsp page that should be translated on server side. The
				rebinder takes the same moves as same with html template's.
			</p>
		</li>
		<li>
			<h2>The Event Handler binding</h2>
			<p>Let's see the example again,</p> 
<pre>
@UiTemplate("TheTemplate.html")
public abstract class TheTemplate extends AbstractPage implements RequiresTemplate, RequiresActionRebind {
	
	@UiField
	Button button;
	
	public TheTemplate(){
		initWidget(createTemplate());
	}
	
	@UiHandler("button")
	void buttonClicked(ClickEvent e) {
		// do something if the button is clicked
	}
}
</pre>
			<p>
				Extends the previous example, we just make the class implement
				<code>RequiresActionRebind</code>
				, and everything is done as your expected.
			</p>
			<h2>Split Event Logic</h2>
			<ul>
				<li>See <a href='#/UserManage'>UserManage</a></li>
			</ul>
		</li>

		<li>
			<h2>The Form Data Binding</h2>
			<p>
				The same and adds
				<code>RequiresFormRebind</code>
			</p> 
<pre>
@UiTemplate("TheTemplate.html")
public abstract class TheTemplate extends AbstractPage implements RequiresTemplate, RequiresActionRebind,
	RequiresFormRebind {
	
	@UiField
	@UiInput
	TextBox input1;
	@UiField
	@UiInput
	TextBox input2;
			
	@UiField
	TextBox button;
	
	public TheTemplate(){
		initWidget(createTemplate());
	}
	
	@UiHandler("button")
	void buttonClicked(ClickEvent e) {
		// the #getFormData() is implemented by FormRebinder
		// the genertated would just like
		// SimpleObject formData = new SimpleObject();
		// formData.put("input1",input1.getValue());
		// formData.put("input2",input2.getValue());
		SimpleObject formData = getFormData(null);
		
		// the #setFormData() is also done by FormRebinder
		setFormData(formData);
		// the generated code... ok, you got it!
	}
}
</pre>
		</li>

		<li>
			<h2>The I18N</h2>
			<p>
				For examples above, <code>TheTemplate.html</code> is the default template source, add a
				TheTemmplate_{locale suffix}.html at the same folder. If your have
				use the
				<code>ClientBundle</code>
				your are quickly seeing what I mean :).
			</p>
			<h2>The server side I18N</h2>
			<p>
				If the <code>RequiresWebTemplate</code> is used, your just do the i18n in the server side.
			</p>			
		</li>

	</ul>

</div>
